<template>
  <!-- 最外层只能有一个组件，不能出现多个 -->
  <div class="demo-userComp-formComp-multiConditionSearchCompDemo">


      <div style="margin-bottom: 10px;">
          <div style="float:left;width: 800px;overflow: auto;border: 1px solid #eee;">
              <multi-condition-search
                  conditionTips="请输入查询条件"
                  :conditionSetting="conditionSetting"
                  @ok-search="okSearchAction"
                  @cancel-search="cancelSearchAction"
                  @enter-search="enterSearchAction"
              ></multi-condition-search>
          </div>
          <div style="margin-left: 820px;">
              <Button type="primary" @click="showCodeAction">显示代码</Button>
          </div>
          <div style="clear: both"></div>
      </div>

      <!-- 显示JavaScript代码 -->
      <pre v-show="isShowCode">
            <code class="javascript"  v-text="jsCode">
            </code>
        </pre>
      <!-- 显示HTML代码 -->
      <pre v-show="isShowCode">
            <code class="html" v-text="htmlCode">
            </code>
      </pre>

      <!-- 文档说明 -->

      <div class="api">
          <div class="anchor">
              <h2 >conditionSetting 属性说明 </h2>
          </div>
          <div class="anchor">
              <h3>Array, 配置字段的条件类型和返回对应的key值</h3>
          </div>
          <table>
              <thead>
              <tr>
                  <th>属性值</th>
                  <th>说明</th>
                  <th>类型</th>
                  <th>返回值</th>
              </tr>
              </thead>
              <tbody>

              <tr>
                  <td>conditionTips</td>
                  <td>input框的提示信息，placehoder的显示内容</td>
                  <td></td>
                  <td>
                      无
                  </td>
              </tr>

              <tr>
                  <td>name</td>
                  <td>字段显示的值</td>
                  <td>String</td>
                  <td>
                      无
                  </td>
              </tr>

              <tr>
                  <td>value</td>
                  <td>字段对应的value值的key</td>
                  <td>String</td>
                  <td>
                      无
                  </td>
              </tr>

              <tr>
                  <td>type</td>
                  <td>字段的类型说明</td>
                  <td>String</td>
                  <td>
                      String,用户的输入只能是字符串类型，做了相关的转换<br/>
                      Date，用户输入是日期类型，以组件的形式展示<br/>
                      Number,用户的输入只能是数字类型，做了相关的转换<br/>
                  </td>
              </tr>

              </tbody>
          </table>

      </div>
      <br/>
      <div class="api">
          <div class="anchor">
              <h2 >function </h2>
          </div>
          <div class="anchor">
              <h3>event说明</h3>
          </div>
          <table>
              <thead>
              <tr>
                  <th>属性值</th>
                  <th>说明</th>
                  <th>参数</th>
                  <th>返回值</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                  <td>ok-search</td>
                  <td>点击提交触发的事件</td>
                  <td>无</td>
                  <td>
                      返回 input 文本输入的值
                  </td>
              </tr>

              <tr>
                  <td>cancel-search</td>
                  <td>点击取消按钮触发的事件<br/>
                      隐藏高级搜索的界面<br/>
                      并且清空用户的输入
                  </td>
                  <td>无</td>
                  <td>
                      无
                  </td>
              </tr>

              <tr>
                  <td>enter-search</td>
                  <td>点击enter触发的事件
                  </td>
                  <td>无</td>
                  <td>
                      JSON，对象中的key是时间戳，对应的值是一个查询条件对象
                  </td>
              </tr>

              </tbody>
          </table>

      </div>

  </div>
</template>

<script>
import hljs from 'highlight.js'

export default {
    mounted: function () {
        window.setTimeout(function () {
            $('.demo-userComp-formComp-multiConditionSearchCompDemo pre code').each(function(i, block) {
                hljs.highlightBlock(block);
            });
        }, 100);
    },
    data: function () {
      return {
          conditionSetting:[
              {
                  name:"年龄",
                  type:"Date",
                  value:"ageForm"
              },
              {
                  name:"关键字",
                  type:"String",
                  value:"keyWordForm"
              },
              {
                  name:"数量",
                  type:"Number",
                  value:"countForm"
              },
          ],
          htmlCode: '<multi-condition-search\n' +
          '\t  :conditionSetting="conditionSetting"\n' +
          '\t  @ok-search="okSearchAction"\n' +
          '\t  @cancel-search="cancelSearchAction"\n' +
          '\t  @enter-search="enterSearchAction"\n' +
          '  ></multi-condition-search>',
          jsCode:'export default {\n' +
          '    mounted: function () {\n' +
          '    },\n' +
          '    data: function () {\n' +
          '        return {\n' +
          '            conditionSetting:[\n' +
          '                {\n' +
          '                    name:"年龄",\n' +
          '                    type:"Date",\n' +
          '                    value:"ageForm"\n' +
          '                },\n' +
          '                {\n' +
          '                    name:"关键字",\n' +
          '                    type:"String",\n' +
          '                    value:"keyWordForm"\n' +
          '                },\n' +
          '                {\n' +
          '                    name:"数量",\n' +
          '                    type:"Number",\n' +
          '                    value:"countForm"\n' +
          '                },\n' +
          '            ],\n' +
          '        };\n' +
          '    },\n' +
          '    methods: {\n' +
          '        // 点击确定按钮触发的事件\n' +
          '        okSearchAction: function () {\n' +
          '            console.dir(arguments);\n' +
          '        },\n' +
          '        // 点击取消按钮触发的事件\n' +
          '        cancelSearchAction: function () {\n' +
          '            console.dir(arguments);\n' +
          '        },\n' +
          '        // 点击回车触发的事件\n' +
          '        enterSearchAction: function () {\n' +
          '            console.dir(arguments);\n' +
          '        },\n' +
          '    },\n' +
          '}',
          isShowCode:false,
      };
    },
    methods: {
        // 点击确定按钮触发的事件
        okSearchAction: function () {
            console.dir(arguments);
        },
        // 点击取消按钮触发的事件
        cancelSearchAction: function () {
            console.dir(arguments);
        },
        // 点击回车触发的事件
        enterSearchAction: function () {
            console.dir(arguments);
        },
        // 显示代码
        showCodeAction: function (){
            this.isShowCode = !this.isShowCode;
        },
    },
    computed: {},
    components: {
    }
  }


</script>

<style scoped lang="scss">
    /***
   scoped ： 表示当前写的样式是针对当前页面的，对其他页面没有影响
   lang="scss": 表示我写的样式代码是针对SASS的，不是less等。强调，属性的值是scss
   ***/
    .demo-userComp-formComp-multiConditionSearchCompDemo {
        .api table {
            font-family: Consolas, Menlo, Courier, monospace;
            font-size: 12px;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #e9e9e9;
            width: 100%;
            margin-bottom: 24px;
        }

        .api table td, .api table th {
            border: 1px solid #e9e9e9;
            padding: 8px 16px;
            text-align: left;
        }

        .api table th {
            background: #f7f7f7;
            white-space: nowrap;
            color: #5c6b77;
            font-weight: 600;
        }
    }
</style>
